<template>
	<view class="container achDetail-container">
		<view class="top-box">
			<image class="top-bg" :src="detailInfo.coverPicture" mode="aspectFit"></image>
		</view>

		<view class="page-main">
			<view class="detail-name">{{detailInfo.achievementName}}</view>
			<view class="page-panel">
				<view class="detail-infobox">
					<view class="info-list">
						<text class="info-title">成果负责人：</text>
						<text class="info-words">{{detailInfo.achievementPrincipal}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">成果类别：</text>
						<text class="info-words">{{detailInfo.achievementCategory}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">所属技术类别：</text>
						<view v-if="detailInfo.belongToTechnologyCategory">
							<template v-for="(item,idx) in detailInfo.belongToTechnologyCategory">
								<text class="label-type" v-if="idx<2">{{item}}</text>
							</template>
						</view>
					</view>
					<view class="info-list">
						<text class="info-title">联系人：</text>
						<text class="info-words">{{detailInfo.contacts}}</text>
					</view>
					
					<view class="info-list">
						<view class="info-list-half">
							<text class="info-title">课题来源：</text>
							<text class="info-words">{{detailInfo.taskSource}}</text>
						</view>
						<view class="info-list-half">
							<text class="info-title">应用状态：</text>
							<text class="info-words">{{detailInfo.useState}}</text>
						</view>
					</view>
					<view class="info-list">
						<view class="info-list-half">
							<text class="info-title">研究形式：</text>
							<text class="info-words">{{detailInfo.studyForm}}</text>
						</view>
						<view class="info-list-half">
							<text class="info-title">技术成熟度：</text>
							<text class="info-words">{{detailInfo.skillRipe}}</text>
						</view>
					</view>
					<view class="info-list">
						<text class="info-title">推广形式：</text>
						<text class="info-words">{{detailInfo.promotionForm&&detailInfo.promotionForm.join(',')}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">成果体现形式：</text>
						<text class="info-words">{{detailInfo.embodyForm&&detailInfo.embodyForm.join(',')}}</text>
					</view>
					<view class="info-list">
						<text class="info-title">应用行业：</text>
						<text class="info-words">{{detailInfo.applicationIndustry&&detailInfo.applicationIndustry.join(',')}}</text>
					</view>
					<view class="info-list">
						<image class="info-img" :src="detailInfo.issuerHeadPortrait" mode="aspectFill"></image>
						<text class="info-words">发布人：{{detailInfo.issuer}}</text>
					</view>
					<view class="broker-list" v-for="item in detailInfo.brokerRelevances">
						<image class="info-img" :src="item.brokerHeadPortrait" mode="aspectFill"></image>
						<view>
							<view class="info-words">技术经理人：{{item.technicalRepresentative}}</view>
							<view class="info-words">联系方式：{{item.technicalPhone}}</view>
						</view>
					</view>
				</view>

			</view>
			<view class="page-panel">
				<view class="panel-title">
					<view class="panel-content">成果简介</view>
				</view>
				<view class="panel-content word-content">
					<template v-if="detailInfo.achievementDescription">
						<view class="content-list" v-for="item in detailInfo.achievementDescription.split('\n')">
							{{item}}
						</view>
					</template>
					<view class="content-list" v-else>无</view>
				</view>
				<view class="panel-title">
					<view class="panel-content">其他</view>
				</view>
				<view class="panel-content word-content">
					<template v-if="detailInfo.otherDetails">
						<view class="content-list" v-for="item in detailInfo.otherDetails.split('\n')">
							{{item}}
						</view>
					</template>
					<view class="content-list" v-else>无</view>
				</view>
				<view class="panel-title">
					<view class="panel-content">成果描述</view>
				</view>
				<view class="panel-content word-content">
					<rich-text :nodes="detailInfo.synopsis"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '@/common/util';
	import api from '@/common/api';
	let pageId = ''
	onLoad((options) => {
		pageId = options.id;
	})
	onMounted(() => {
		getDetailInfo()
	})
	const detailInfo = ref<any>({})
	const getDetailInfo = async () => {
		showLoading()
		try {
			const res = await api.getAchievementList({
				id: pageId,
			})
			detailInfo.value = res.data
		} finally {
			hideLoading()
		}
	
	}
</script>

<style lang="scss">
	.achDetail-container {
		padding-bottom: 100rpx;

		.top-box {
			height: 440rpx;
			background-color: #333;
		}

		.top-bg {
			width: 100%;
			height: 100%;
		}

		.page-main {
			background-color: #f7f7f7;
			border-radius: 20rpx;
			position: relative;
			z-index: 1;
			top: -15rpx;
			padding: 20rpx
		}

		.detail-name {
			font-weight: 500;
			font-size: 34rpx;
			color: #232323;
			margin-bottom: 10rpx;
		}

		.page-panel {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}

		.label-box {
			margin-bottom: 10rpx
		}

		.info-list {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			margin-bottom: 10rpx
		}
		.broker-list{
			display: flex;
			align-items: center;
			font-size: 26rpx;
			margin-bottom: 10rpx
		}

		.info-list-half {
			width: 50%;
		}

		.info-title {
			color: #82848A
		}

		.info-words {
			color: #333;
		}

		.info-img {
			width: 58rpx;
			height: 58rpx;
			border-radius: 58rpx;
			border: solid 1px #eee;
			margin-right: 10rpx
		}

		.panel-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #2f65f3;
			background-color: #fff;

			.panel-content {
				height: 80rpx;
				display: flex;
				align-items: center;
			}

			.panel-content::before {
				content: "";
				display: inline-block;
				height: 40rpx;
				width: 1px;
				border-right: 8rpx solid #2f65f3;
				margin-right: 10rpx;
			}
		}

		.word-content {
			padding: 20rpx 15rpx;
		}

		.content-list {
			font-size: 26rpx;
			color: #2d2d2d;
			line-height: 40rpx;
			position: relative;
		}

		.content-list::before {
			content: "";
			display: inline-block;
			width: 12rpx;
			height: 12rpx;
			border-radius: 12rpx;
			background-color: #2f65f3;
			position: absolute;
			left: -20rpx;
			top: 16rpx;
		}
	}
</style>